<template>
  <div id="container" />
</template>
<script>
  import G6 from '@antv/g6'
  import { getHolderChart } from '@/api/company/holder/companyHolderChange'
  export default {
    name: 'CompanyHolderChart',
    props: {
      // 公司ID
      bussId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        loading: true,
        queryParams: {
          companyId: undefined,
          changeId: undefined
        },
        data: {},
        graph: undefined
      }
    },
    mounted() {
    },
    methods: {
      initChart() {
        if (this.graph) {
          this.graph.destroy()
        }
        this.queryParams.companyId = this.$route.query.companyId
        getHolderChart(this.queryParams).then(response => {
          this.data = response.datas.resultMap
          // 设置logo
          G6.Util.traverseTree(this.data, d => {
            d.leftIcon = {
              style: {
                fill: '#e6fffb',
                stroke: '#e6fffb'
              },
              img: d.logo || ''
            }
            return true
          })
          // 设置节点
          G6.registerNode('icon-node', {
            draw(cfg, group) {
              const styles = this.getShapeStyle(cfg)
              const { labelCfg = {}} = cfg
              const keyShape = group.addShape('rect', {
                attrs: {
                  ...styles,
                  x: 0,
                  y: 0
                }
              })

              if (cfg.leftIcon) {
                const { style, img } = cfg.leftIcon
                group.addShape('rect', {
                  attrs: {
                    x: 1,
                    y: 1,
                    width: 38,
                    radius: 10,
                    height: styles.height - 2,
                    fill: '#8c8c8c',
                    ...style
                  }
                })

                group.addShape('image', {
                  attrs: {
                    x: 8,
                    y: 8,
                    width: 24,
                    height: 24,
                    img: img || ''
                    // img: img || '../../../assets/image/wenhao.png'
                  },
                  name: 'image-shape'
                })
              }

              if (cfg.label) {
                group.addShape('text', {
                  attrs: {
                    ...labelCfg.style,
                    text: cfg.label,
                    x: 45,
                    y: 18
                  }
                })
              }

              group.addShape('text', {
                attrs: {
                  textBaseline: 'top',
                  x: 45,
                  y: 25,
                  fontSize: 10,
                  lineHeight: 40,
                  text: cfg.desc,
                  fill: 'rgba(0,0,0, 1)'
                },
                name: `description`
              })
              return keyShape
            }
          }, 'rect')
          // 设置连接线
          G6.registerEdge('flow-line', {
            draw(cfg, group) {
              const startPoint = cfg.endPoint
              const endPoint = cfg.startPoint

              const { style } = cfg
              const shape = group.addShape('path', {
                attrs: {
                  stroke: style.stroke,
                  endArrow: style.endArrow,
                  path: [
                    ['M', startPoint.x, startPoint.y],
                    ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
                    ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
                    ['L', endPoint.x, endPoint.y]
                  ]
                }
              })
              return shape
            }
          })
          // 设置默认的节点样式
          const defaultNodeStyle = {
            fill: '#91d5ff',
            stroke: '#40a9ff',
            radius: 10
          }
          // 设置默认的连接线的样式
          const defaultEdgeStyle = {
            stroke: '#91d5ff',
            endArrow: {
              path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
              fill: '#91d5ff',
              d: -20
            }
          }
          // 设置默认视图
          const defaultLayout = {
            type: 'compactBox',
            direction: 'V',
            getId: function getId(d) {
              return d.id
            },
            getHeight: function getHeight() {
              return 16
            },
            getWidth: function getWidth() {
              return 70
            },
            getVGap: function getVGap() {
              return 40
            },
            getHGap: function getHGap() {
              return 70
            }
          }
          // 设置默认展示的label样式
          const defaultLabelCfg = {
            style: {
              fill: '#000',
              fontSize: 10
            }
          }
          // 获取滚动的宽度和高度
          const width = document.getElementById('container').scrollWidth
          const height = document.getElementById('container').scrollHeight || 500
          this.graph = new G6.TreeGraph({
            container: 'container',
            width,
            height,
            linkCenter: true,
            maxZoom: 2,
            modes: {
              default: [
                'drag-canvas',
                'zoom-canvas'
              ]
            },
            defaultNode: {
              type: 'icon-node',
              size: [200, 40],
              style: defaultNodeStyle,
              labelCfg: defaultLabelCfg
            },
            defaultEdge: {
              type: 'flow-line',
              style: defaultEdgeStyle
            },
            layout: defaultLayout
          })

          this.graph.data(this.data)
          this.graph.render()
          this.graph.fitView()
        })
      }
    }
  }
</script>
